<template>
  <div>
    <el-dialog title="新增角色" @close="closeUser" :visible.sync="isShow" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="140px"
              label-position="left">
              <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="appId" label="应用编号">
                    <el-select v-model="form.appId" filterable  @change='appId' placeholder="请选择应用编号" size="mini" >
                    <el-option
                    v-for="item in appList"
                    :key="item.value"
                    :label="item.AppNum + '-' +item.AppName"
                    :value="item.AppNum">
                    </el-option>
                  </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="userNum" label="角色编号">
                    <!-- 下拉 -->
                    <el-input v-model="form.userNum" placeholder="" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                 </el-row>
                 <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="RoleName" label="角色名称">
                    <el-input v-model="form.RoleName" placeholder=""></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="RoleClass" label="角色分类">
                    <!-- 下拉 -->
                     <el-select v-model="form.RoleClass" filterable  placeholder="请选择角色分类"  >
                    <el-option
                    v-for="item in RoleList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  </el-form-item>
                </el-col>
                 </el-row>
                 <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="LegalPersonNum" label="法人号">
                    <el-input v-model="form.LegalPersonNum" placeholder="" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="LegalPersonName" label="法人名称">
                    <el-input  v-model="form.LegalPersonName" placeholder="" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
                 </el-row>
                 <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="MutualExclRole" label="互斥角色">
                    <el-select v-model="form.MutualExclRole" multiple placeholder="请选择互斥角色">
                    <el-option v-for="item in treeList" :key="item.value" :label="item.name" :value="item.id"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                  <!--   <el-input v-model="form.MutualExclRole" placeholder="" :disabled="true"></el-input> -->
                  </el-form-item>
                </el-col>
                 </el-row>
                <!-- <el-button type="primary" icon='el-icon-search' size="mini" @click="innerVisible = true">添加</el-button>
                <el-col :span="12" style="text-align:center;">
                  <el-form-item prop="tellerNo" >
                    <el-dialog  width="90%" title="添加互斥角色" :visible.sync="innerVisible" :center="true" append-to-body @open="diaclick" >
                      <el-checkbox-group v-model="checkList">
                       <el-checkbox v-for="date in treeList"  :label="date.id" :key="date.id"  >{{ date.name }}</el-checkbox>
                      </el-checkbox-group>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="innerVisible = false">取 消</el-button>
                      <el-button type="primary" @click="confirm">确 定</el-button>
                    </span>
                    </el-dialog>
                  </el-form-item>
                </el-col> -->
                <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="EffeDate" label="生效日期">
                    <!-- datePicker -->
                    <el-date-picker  v-model="form.EffeDate" :editable=false value-format="yyyyMMdd" type="date" style="width:100%;"
                      placeholder="选择生效日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="ExpiDate" label="失效日期">
                    <!-- datePicker -->
                   <el-date-picker v-model="form.ExpiDate" :editable=false value-format="yyyyMMdd" type="date" style="width:100%;"
                      placeholder="选择失效日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                </el-row>
                <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item prop="SortNum" label="排序号">
                    <el-input-number v-model="form.SortNum" @change="handleChange1" :min="1" :max="100" label="排序号"></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="RoleStatus" label="角色状态">
                    <!-- 下拉 -->
                    <el-select v-model="form.RoleStatus"   filterable  placeholder="请选择角色状态"  >
                    <el-option
                    v-for="item in RoleStatusList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                  </el-select>
                  <!--   <el-input v-model="form.RoleStatus" placeholder=""></el-input> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div  style="text-align:right;margin:20px 0" >
             <el-button size="mini" @click="cancleUserMod">取消</el-button>
            <el-button type="primary" size="mini" @click="addUser" >确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import selectTree from "@/components/selectTree2/";
import request from "@/common/utils/request";
import createUser from "@/message/userManage/user/user-create";
import branchList from "@/message/shared/branch-list";
import toolBox from "@/common/utils/toolBox";
import number from "@/message/userManage/role/number";
import roleadd from "@/message/userManage/role/role-add";
import appQuery from "@/message/shared/appquery";
import getGlobalParams from "@/common/utils/getGlobalParams";
import tree from "@/message/userManage/role/tree";

export default {
  name: "create-user",
  data() {
     let startdateCheck = (rule, value, callback) => { //自定义表单验证 校验IP地址
        if (value != "") {
          let time = toolBox.getNowTime(0);
          if (value - time >= 0) {
            callback();
          } else {
            callback(new Error("生效日期必须大于当前日期"));
          }
        } else {
          callback();
        }
      };
      let enddateCheck = (rule, value, callback) => { //自定义表单验证 校验IP地址
        if (value != "") {
          if (value - this.form.EffeDate >= 0) {
            callback();
          } else {
            callback(new Error("失效日期必须大于生效日期"));
          }
        } else {
          callback();
        }
      };
    return {
      innerVisible: false,
      loading: false,
      RoleList:[
        {name:'01-岗位',value:'01'},
      ],
      RoleStatusList: [
         {name:'0-停用',value:'0'},
         {name:'1-启用',value:'1'},
      ],
      checkList:[],
      treeList: [],
      appList:[],
      form: {
        //表单信息
        appId: "",
        userNum: "",                     
        RoleName: "",
        RoleClass: "",
        LegalPersonNum: "",
        LegalPersonName:"",
        MutualExclRole: [],
        EffeDate: "",
        ExpiDate: "",
        SortNum: "1",
        RoleStatus: "",
         checked: [],
      },
      rules: {
        //校验对象
        // userID: [
        //   { required: true, message: "请输入用户编号", trigger: "blur" }
        // ],
        appId: [
          {
            required: true,
            message: "请选择应用编号",
            trigger: "change"
          }
        ],
        RoleName: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur"
          }
        ],
        RoleClass: [
          {
            required: true,
            message: "请输入角色分类",
            trigger: "change"
          }
        ],
        EffeDate: [
          {
            required: true,
            message: "请选择生效日期",
            trigger: "blur"
          },
          {
            validator: startdateCheck,
            trigger: 'blur'
            }
        ],
        ExpiDate: [
          {
            required: true,
            message: "请选择失效日期",
            trigger: "blur"
          },
          {
            validator: enddateCheck,
            trigger: 'blur'
            }
        ],
        SortNum: [
          {
            required: true,
            message: "请选择排序号",
            trigger: "blur"
          }
        ],
        RoleStatus: [
          {
            required: true,
            message: "请选择角色状态",
            trigger: "change"
          }
        ],
      }
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {
    selectTree
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
 created: function() {

  },
  methods: {
    ceshi(demo){
        console.log(demo)
    },
    initDate() {
      //应用查询
      this.loading=true;
      let resBody = new appQuery();
      resBody.data.UserNum = this.$store.getters.UserNum;
      request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.appList = response.RspInfo.Result;
            console.log(appList)
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
          this.loading = false;
          //   this.logger.log("fail", error);
        });
    },
     handleChange1(value) {
        console.log(value);
      },
      confirm(){
        console.log(this.form.checkList);
         this.form.MutualExclRole=this.checkList;
         this.innerVisible = false;
      },
    //根据应用编号加载角色编号
    appId(){
       this.loading = true;
      let resBody = new  number();
      resBody.data.AppNum =this.form.appId
       request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            console.log(response)
            this.loading = false;
             this.form.userNum = response.RspInfo.Result[0].ROLENUM;
             this.tree();
          }else {
          this.loading = false;
          this.$message({
            type: "success",
            message: `${response.SYS_HEAD.ReturnMessage}!`
          });
        }
        })
        .catch(error => {
          this.loading = false;
          // this.logger.log("fail", error);
        });

    },
    openCreate() {
      //打开弹窗事件
      this.loading = true;
      this.initDate();
      if (this.$refs.form) {
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.loading = false;
      this.form.LegalPersonNum = this.$store.getters.LegalPersonNum;
      this.form.LegalPersonName = this.$store.getters.LegalPersonName;
       this.postStatus = getGlobalParams.get("postStatus");
    },
  diaclick(){
    console.log(121222)
        this.tree();
    },
    tree(){
       this.loading = true;
      let resBody = new  tree();
      resBody.data.AppNum =this.form.appId;
      resBody.data.RoleNum =this.form.userNum
       request(resBody)
        .then(response => {
          if (response.APP_HEAD.ReturnCode === "000000") {
            console.log(response)
            this.treeList = response.RspInfo.Result;
            this.loading = false;

          }else {
          this.loading = false;
          // this.$message({
          //   type: "success",
          //   message: `${response.SYS_HEAD.ReturnMessage}!`
          // });
        }
        })
        .catch(error => {
          this.loading = false;
          // this.logger.log("fail", error);
        });
    },
      cancleUserMod() {
      //关闭弹窗事件，清楚表单验证
       this.isShow = false;
      this.$refs.form.clearValidate();
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
    },
    addUser() {
      //添加用户
      this.$refs["form"].validate(valid => {
        if (valid) {
          let resBody = new roleadd();
          resBody.data.AppNum = this.form.appId;
          resBody.data.RoleNum = this.form.userNum;
          resBody.data.RoleName = this.form.RoleName;
          resBody.data.RoleClass = this.form.RoleClass;
          resBody.data.LegalPersonNum = this.form.LegalPersonNum;
          resBody.data.LegalPersonName = this.form.LegalPersonName;
          /* resBody.data.MutualExclRole = this.form.MutualExclRole; */
          resBody.data.MutualExclRole = this.form.MutualExclRole.join(",");
          resBody.data.EffeDate = this.form.EffeDate;
          resBody.data.ExpiDate = this.form.ExpiDate;
          resBody.data.SortNum = this.form.SortNum;
          resBody.data.RoleStatus = this.form.RoleStatus;
          request(resBody)
            .then(response => {
              if (response.SYS_HEAD.ReturnCode === "000000") {
                this.isShow = false;
                this.$message({
                  type: "success",
                  message: "用户新增成功!",
                })
                  this.isShow = false;
                  this.$emit("refreshTable");
                  this.$refs["form"].clearValidate(); //清楚表单验证
                  this.$refs["form"].resetFields(); //清楚表单验证
              } else {
                this.$message({
                  type: "warning",
                  message: "角色" + response.SYS_HEAD.ReturnMessage
                });
                this.loading = false;
              }
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          this.$message({
            type: "warning",
            message: "请输入合法的数据！"
          });
          return false;
        }
      });
    }
   },
};
</script>
<style lang="scss" scoped>
/* .dialog {
  padding: 15px;
  height: 600px;
} */
.content {
  display: flex;
  flex-direction: column;
}

// .footer {
//   width: 100%;

//   margin-top: 10px;
// }
.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-card {
  overflow: inherit;
}
</style>
